<template>
  <div>
    <!-- 重要异常结果 -->
    <div>
      <div class="title">
        <div class="title-item">重要异常结果</div>
      </div>
      <a-form>
        <!-- <draggable
          class="drag"
          :list="sortList.resultList"
          :handle="'.drag-icon'"
          itemKey="id"
          animation="300"
        > -->

        <div class="grid-item" v-for="(element, index) in sortList.resultList" :key="index">
          <div class="drag-main">
            <div class="sub-title">
              <!-- <p>
                    <span>{{ element.name }}</span>
                    <span> [{{ element.icdCode }}]</span>
                    <span class="result-label" v-if="element.abnormalType">{{
                      element.abnormalType
                    }}</span>
                  </p> -->
              <div class="result">
                <p>结论</p>
                <a-input
                  class="result-input"
                  v-model:value="element.name"
                  placeholder="请输入结论"
                />
                <a-input
                  class="result-input"
                  v-model:value="element.icdCode"
                  placeholder="请输入编码"
                />
                <a-select
                  class="result-select"
                  v-model:value="element.abnormalType"
                  style="width: 120px"
                  allowClear
                  placeholder="请选择分类"
                >
                  <a-select-option value="A类">A类</a-select-option>
                  <a-select-option value="B类">B类</a-select-option>
                  <a-select-option value="C类">C类</a-select-option>
                </a-select>
              </div>
              <div class="drag-right">
                <a-button
                  type="link"
                  class="move-fn-btn"
                  @click="moveUp(sortList.resultList, index)"
                  :disabled="index === 0"
                  >上移↑</a-button
                >
                <a-button
                  type="link"
                  class="move-fn-btn"
                  @click="moveDown(sortList.resultList, index)"
                  :disabled="index === sortList.resultList.length - 1"
                  >下移↓</a-button
                >
                <a-popconfirm
                  ok-text="确定"
                  cancel-text="取消"
                  title="你确定要删除这个结论吗？"
                  @confirm="confirm(sortList.resultList, index)"
                >
                  <span class="delete-item">删除</span>
                </a-popconfirm>
              </div>
            </div>
            <div class="result-content">
              <div class="result-title">依据</div>
              <a-form-item>
                <a-textarea
                  style="width: 100%"
                  :rows="5"
                  placeholder="请输入依据"
                  v-model:value="element.basic"
                />
              </a-form-item>
              <div class="result-title">指导建议</div>
              <a-form-item>
                <a-textarea
                  style="width: 100%"
                  :rows="5"
                  placeholder="请输入指导建议"
                  v-model:value="element.suggest"
                />
              </a-form-item>
            </div>
          </div>
        </div>

        <!-- </draggable> -->
        <a-button
          class="addMainInspection"
          :icon="h(PlusOutlined)"
          type="primary"
          @click="addResult('resultList')"
          ghost
          >新增</a-button
        >
      </a-form>
    </div>
    <!-- 诊断 -->
    <div>
      <div class="title">
        <div class="title-item">诊断</div>
      </div>
      <a-form>
        <!-- <draggable
          class="drag"
          :list="sortList.diagnosisList"
          :handle="'.drag-icon'"
          itemKey="id"
          animation="300"
        > -->
        <div class="grid-item" v-for="(element, index) in sortList.diagnosisList" :key="index">
          <div class="drag-main">
            <div class="sub-title">
              <!-- <p>
                    <span>{{ element.name }}</span>
                    <span> [{{ element.icdCode }}]</span>
                    <span class="result-label" v-if="element.abnormalType">{{
                      element.abnormalType
                    }}</span>
                  </p> -->
              <div class="result">
                <p>结论</p>
                <a-input
                  class="result-input"
                  v-model:value="element.name"
                  placeholder="请输入结论"
                />
                <a-input
                  class="result-input"
                  v-model:value="element.icdCode"
                  placeholder="请输入编码"
                />
                <!-- <a-select
                      class="result-select"
                      v-model:value="element.abnormalType"
                      style="width: 120px"
                      allowClear
                      placeholder="请选择分类"
                    >
                      <a-select-option value="A类">A类</a-select-option>
                      <a-select-option value="B类">B类</a-select-option>
                      <a-select-option value="C类">C类</a-select-option>
                    </a-select> -->
              </div>
              <div class="drag-right">
                <a-button
                  type="link"
                  class="move-fn-btn"
                  @click="moveUp(sortList.diagnosisList, index)"
                  :disabled="index === 0"
                  >上移↑</a-button
                >
                <a-button
                  type="link"
                  class="move-fn-btn"
                  @click="moveDown(sortList.diagnosisList, index)"
                  :disabled="index === sortList.diagnosisList.length - 1"
                  >下移↓</a-button
                >
                <a-popconfirm
                  ok-text="确定"
                  cancel-text="取消"
                  title="你确定要删除这个结论吗？"
                  @confirm="confirm(sortList.diagnosisList, index)"
                >
                  <span class="delete-item">删除</span>
                </a-popconfirm>
              </div>
            </div>
            <div class="result-content">
              <div class="result-title">依据</div>
              <a-form-item>
                <a-textarea
                  style="width: 100%"
                  :rows="5"
                  placeholder="请输入依据"
                  v-model:value="element.basic"
                />
              </a-form-item>
              <div class="result-title">指导建议</div>
              <a-form-item>
                <a-textarea
                  style="width: 100%"
                  :rows="5"
                  placeholder="请输入指导建议"
                  v-model:value="element.suggest"
                />
              </a-form-item>
            </div>
          </div>
        </div>

        <!-- </draggable> -->
        <a-button
          class="addMainInspection"
          :icon="h(PlusOutlined)"
          type="primary"
          @click="addResult('diagnosisList')"
          ghost
          >新增</a-button
        >
      </a-form>
    </div>
    <!-- 其他阳性发现 -->
    <div>
      <div class="title">
        <div class="title-item">其他阳性发现</div>
      </div>
      <a-form>
        <!-- <draggable
          class="drag"
          :list="sortList.otherList"
          :handle="'.drag-icon'"
          itemKey="id"
          animation="300"
        > -->
        <div class="grid-item" v-for="(element, index) in sortList.otherList" :key="index">
          <div class="drag-main">
            <div class="sub-title">
              <!-- <p>
                    <span>{{ element.name }}</span>
                    <span> [{{ element.icdCode }}]</span>
                    <span class="result-label" v-if="element.abnormalType">{{
                      element.abnormalType
                    }}</span>
                  </p> -->
              <div class="result resultOther">
                <p>阳性发现</p>
                <a-input
                  class="result-input"
                  v-model:value="element.name"
                  placeholder="请输入结论"
                />
                <!-- <a-select
                      class="result-select"
                      v-model:value="element.abnormalType"
                      style="width: 120px"
                      allowClear
                      placeholder="请选择分类"
                    >
                      <a-select-option value="A类">A类</a-select-option>
                      <a-select-option value="B类">B类</a-select-option>
                      <a-select-option value="C类">C类</a-select-option>
                    </a-select> -->
              </div>
              <div class="drag-right">
                <a-button
                  type="link"
                  class="move-fn-btn"
                  @click="moveUp(sortList.otherList, index)"
                  :disabled="index === 0"
                >
                  上移↑
                </a-button>
                <a-button
                  type="link"
                  class="move-fn-btn"
                  @click="moveDown(sortList.otherList, index)"
                  :disabled="index === sortList.otherList.length - 1"
                >
                  下移↓
                </a-button>
                <a-popconfirm
                  ok-text="确定"
                  cancel-text="取消"
                  title="你确定要删除这个结论吗？"
                  @confirm="confirm(sortList.otherList, index)"
                >
                  <span class="delete-item">删除</span>
                </a-popconfirm>
              </div>
            </div>
            <div class="result-content">
              <!-- <div class="result-title">依据</div> -->
              <!-- <a-form-item>
                    <a-textarea
                      style="width: 100%"
                      :rows="5"
                      placeholder="请输入依据"
                      v-model:value="element.basic"
                    />
                  </a-form-item> -->
              <div class="result-title">指导建议</div>
              <a-form-item>
                <a-textarea
                  style="width: 100%"
                  :rows="5"
                  placeholder="请输入指导建议"
                  v-model:value="element.suggest"
                />
              </a-form-item>
            </div>
          </div>
        </div>
        <!-- </draggable> -->
        <a-button
          class="addMainInspection"
          :icon="h(PlusOutlined)"
          type="primary"
          @click="addResult('otherList')"
          ghost
          >新增</a-button
        >
      </a-form>
    </div>
    <!-- <div>
      <div class="title">
        <div class="title-item">其他阳性发现</div>
        <a-button :icon="h(PlusOutlined)" type="primary" ghost>新增</a-button>
      </div>
      <a-form>
        <draggable
          class="drag"
          :list="sortList.otherList"
          :handle="'.drag-icon'"
          itemKey="id"
          animation="300"
        >
          <template #item="{ element, index }">
            <div class="grid-item">
              <div class="drag-main">
                <div class="sub-title">
                  {{ element }}{{ index }} //临时加的
                  <a-form-item label="结论" :colon="false" class="other-item-form">
                    <a-input style="width: 100%" />
                  </a-form-item>
                  <div class="drag-right">
                    <div class="drag-icon"><DragOutlined /></div>
                    <a-popconfirm
                      ok-text="确定"
                      cancel-text="取消"
                      title="你确定要删除这个结论吗？"
                      @confirm="confirm"
                    >
                      <span class="delete-item">删除</span>
                    </a-popconfirm>
                  </div>
                </div>
                <div class="result-content">
                  <div class="result-title">阳性发现</div>
                  <a-form-item>
                    <a-textarea style="width: 100%" :rows="5" />
                  </a-form-item>
                </div>
              </div>
            </div>
          </template>
        </draggable>
      </a-form>
    </div> -->
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, h, watch, nextTick } from 'vue'
import draggable from 'vuedraggable'
import { DragOutlined, PlusOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const sortList = reactive({
  resultList: [],
  diagnosisList: [],
  otherList: []
})
const props = defineProps({
  sortLists: {
    type: Object, // 或者 Object, 取决于你需要的类型
    required: true
  }
})
watch(
  () => props,
  (newValue, oldValue) => {
    nextTick(() => {
      sortList.resultList = newValue.sortLists.resultList
      sortList.diagnosisList = newValue.sortLists.diagnosisList
      sortList.otherList = newValue.sortLists.otherList
      if (sortList.resultList && sortList.resultList.length > 0) {
        for (let i = 0; i < sortList.resultList.length; i++) {
          if (!sortList.resultList[i].abnormalType) {
            sortList.resultList[i].abnormalType = undefined
          }
        }
      }
      if (sortList.diagnosisList && sortList.diagnosisList.length > 0) {
        for (let i = 0; i < sortList.diagnosisList.length; i++) {
          if (!sortList.diagnosisList[i].abnormalType) {
            sortList.diagnosisList[i].abnormalType = undefined
          }
        }
      }
    })
  },
  {
    immediate: true,
    deep: true
  }
)
const confirm = (list, index) => {
  list.splice(index, 1)
}
const addResult = (name) => {
  const base = {
    abnormalType: [],
    basic: '',
    explain: '',
    icdCode: '',
    name: '',
    related: '',
    suggest: ''
  }
  if (name == 'resultList') {
    let isContinue = false
    if (sortList.resultList.length > 0) {
      for (let i = 0; i < sortList.resultList.length; i++) {
        if (
          sortList.resultList[i].name == '' ||
          sortList.resultList[i].abnormalType == [] ||
          sortList.resultList[i].basic == '' ||
          sortList.resultList[i].suggest == ''
        ) {
          isContinue = true
        }
      }
      if (isContinue == true) {
        message.error('请先填写完成以上内容！')
      } else {
        sortList.resultList.push(base)
      }
    } else {
      sortList.resultList.push(base)
    }
    // sortList.resultList.push(base)
  } else if (name == 'diagnosisList') {
    let isContinueTwo = false
    if (sortList.diagnosisList.length > 0) {
      for (let i = 0; i < sortList.diagnosisList.length; i++) {
        if (
          sortList.diagnosisList[i].name == '' ||
          sortList.diagnosisList[i].basic == '' ||
          sortList.diagnosisList[i].suggest == ''
        ) {
          isContinueTwo = true
        }
      }
      if (isContinueTwo == true) {
        message.error('请先填写完成以上内容！')
      } else {
        sortList.diagnosisList.push(base)
      }
    } else {
      sortList.diagnosisList.push(base)
    }
    // sortList.diagnosisList.push(base)
  } else {
    let isContinueThree = false
    if (sortList.otherList.length > 0) {
      for (let i = 0; i < sortList.otherList.length; i++) {
        if (sortList.otherList[i].name == '' || sortList.otherList[i].suggest == '') {
          isContinueThree = true
        }
      }
      if (isContinueThree == true) {
        message.error('请先填写完成以上内容！')
      } else {
        sortList.otherList.push(base)
      }
    } else {
      sortList.otherList.push(base)
    }
    // sortList.otherList.push(base)
  }
}

const moveUp = (data: any, index: any) => {
  const temp = data[index - 1]
  data[index - 1] = data[index]
  data[index] = temp
}
const moveDown = (data: any, index: any) => {
  const temp = data[index + 1]
  data[index + 1] = data[index]
  data[index] = temp
}

defineEmits(['update:sortList'])
</script>
<style lang="less" scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  margin-top: 16px;
  background: #e8f3ff;

  .title-item {
    font-size: 16px;
    font-weight: 600;
    color: #165dff;
  }
}

.addMainInspection {
  display: block;
  width: 100%;
  margin-top: 12px;
}

.grid-item {
  margin-top: 12px;
  border: 1px solid #e5e6eb;
}

::v-deep(.drag-main) {
  .sub-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 0 12px;
    line-height: 52px;
    color: #1d2129;
    border-bottom: 1px solid #e5e6eb;

    p {
      margin: 0;

      span {
        font-weight: bold;

        &:nth-child(2) {
          margin-left: 5px;
        }
      }
    }

    .result {
      width: 100%;

      p {
        display: inline-block;
        margin-right: 15px;
        vertical-align: middle;
      }

      .result-input {
        display: inline-block;
        width: 100px;
        margin-right: 10px;
        vertical-align: middle;

        &:nth-of-type(1),
        &:nth-of-type(2) {
          width: 150px !important;
        }
      }

      &.resultOther {
        .result-input {
          width: calc(100% - 85px) !important;
        }
      }
    }

    .result-label {
      padding: 1px 8px;
      margin-left: 8px;
      font-weight: 500;
      color: #3491fa;
      background: #e8f7ff;
      border: 1px solid #3491fa;
      border-radius: 2px;
    }
  }

  .ant-form-item {
    margin-bottom: 0;
  }

  .drag-right {
    display: flex;
    align-items: center;

    .delete-item {
      width: 32px;
      margin-left: 14px;
      line-height: normal;
    }
  }

  .result-content {
    padding: 12px;
    background: #f7f8fa;

    .result-title {
      margin-top: 12px;
      margin-bottom: 8px;
      font-weight: bold;
      color: #1d2129;
    }

    .result-title:first-child {
      margin-top: 0;
    }
  }
}

.other-item-form {
  flex: 1;
  margin-right: 16px;
}

.delete-item {
  color: red;
  cursor: pointer;
}

.move-fn-btn {
  padding: 0 7px;
}
</style>
